<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title></title>
    <link rel="stylesheet" href="/bootstrap-3.4.1/dist/css/bootstrap.min.css">
</head>
<body>
    <div id="app">
        组件第一使用
        <pandle :coun='counter' @send-count='revdata'>
            <div slot="header">区块头部</div>
            <div slot="main">替换默认内容</div>
            <div slot="footer">更多信息</div>
        </pandle>
    </div>
    <div id="app">
        组件第二使用
        <pandle :coun='counter' @send-count='revdata'>
            <div slot="header">显示logo</div>
            <div slot="main"><img src="" alt=看不见"></div>
            <div slot="footer">版权信息</div>
        </pandle>
    </div>
    <template id="temp">
        <div class="container">
            <div class="header">
                <slot name="header">默认的内容</slot>
            </div>
            <div class="main">
                <slot name="main"><p>我是默认的内容</p></slot>
            </div>
            <div class="footer">
                <slot name="footer"><p>我是默认的内容</p></slot>
            </div>
        </div>
    </template>
    <script type="text/javaScript" charset="UTF-8" src="/JS文件/vue.js"></script>
    <script>
        Vue.component("pandle",{
            template:'#temp',
        })
        var vm = new Vue({
            el:'#app',
            data:{
                msg:'hello world'
            }
        })
    </script>
</body>
</html>